<table class="table table-bordered">
    <tbody>
    <tr>
        <th class="col-lg-2 col-md-2 col-sm-2">Name</th>
        <td>
            <span style="white-space: pre-line">{{profile.name}}</span>
        </td>
    </tr>
    <tr>
        <th class="col-lg-2 col-md-2 col-sm-2">Default Tray</th>
        <td>
            <span style="white-space: pre-line">{{profile.tray}}</span>
        </td>
    </tr>
    <tr>
        <th class="col-lg-2 col-md-2 col-sm-2">Unit</th>
        <td>
            <div class="unit-holder">
                <div></div>
                <div id="unit-table_wrapper" class="dataTables_wrapper no-footer">

                    <table id="unit-table" class="display dataTable no-footer" style="width: 100%;" role="grid"
                           aria-describedby="unit-table_info">
                        <thead>
                        <tr role="row">
                            <th class="sorting_asc" tabindex="0" aria-controls="unit-table" rowspan="1" colspan="1"
                                aria-sort="ascending" aria-label="Name: activate to sort column descending"
                                style="width: 121px;">Name
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="unit-table" rowspan="1" colspan="1"
                                aria-label="Black: activate to sort column ascending" style="width: 118px;">Black
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="unit-table" rowspan="1" colspan="1"
                                aria-label="Temp: activate to sort column ascending" style="width: 117px;">Temp
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="unit-table" rowspan="1" colspan="1"
                                aria-label="ReadMe: activate to sort column ascending" style="width: 153px;">ReadMe
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for unit in profile['units']: %}
                         <tr role="row">
                            <td >{{unit.name}}</td>
                            <td>{{unit.black}}</td>
                            <td>{{unit.temp}}</td>
                            <td>{{unit.readme|safe}}</td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <th class="col-lg-2 col-md-2 col-sm-2">Selector</th>
        <td>
            <div class="selector-holder">
                <div></div>
                <div id="selector-table_wrapper" class="dataTables_wrapper no-footer">
                    <table id="selector-table" class="display dataTable no-footer" style="width: 100%;" role="grid"
                           aria-describedby="selector-table_info">
                        <thead>
                        <tr role="row">
                            <th>Weight</th>
                            <th>Selector</th>
                            {% for unit in profile['units']: %}
                            <th>{{unit.name}}</th>
                            {% endfor %}
                        </tr>
                        </thead>
                        <tbody>
                        {% for selector in profile['selectors']: %}
                        <tr role="row">
                            <td>{{selector['weight']}}</td>
                            <td>{{selector['name']}}</td>
                            {% for condition in selector['conditions']: %}
                            <td>
                                <div class="condition">
                                    <b>Name:</b>&nbsp;{{condition['name']}}<br>
                                    <b>A:</b>&nbsp;{{condition['va']}}<br>
                                    <b>B:</b>&nbsp;{{condition['vb']}}<br>
                                    <p>{{condition['readme']}}</p>
                                </div>
                            </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <th class="col-lg-2 col-md-2 col-sm-2">Readme</th>
        <td>
            <span style="white-space: pre-line">asdfsdf</span>
        </td>
    </tr>
    </tbody>
</table>